<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>

<!-- 按规格选择背景 -->
<app-bg-mask style="z-index: 2000;" *ngIf="standardDialogShow" (mask)="maskShowHide($event)"></app-bg-mask>
<!-- 按规格选择的弹框 -->
<app-standard-dialog *ngIf="standardDialogShow" [foodItem]="foodItem" [show]="standardDialogShow" (showHideChange)="standardShowHide($event)"></app-standard-dialog>

<!-- 头部 -->
<div class="header">
  <div class="left flex" [routerLink]="['/main']"  id="btn-back" *ngIf="!addFood.addOrderId">
    <div class="left-icon">
      <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
    </div>
    <div class="left-name">
      <span class="back-name">返回</span>
    </div>
  </div>

  <div class="left flex" [routerLink]="['/main/order/order-details']" [queryParams]="{tid: addFood.tableId}" *ngIf="addFood.addOrderId">
    <div class="left-icon">
      <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
    </div>
    <div class="left-name">
      <span class="back-name">返回</span>
    </div>
  </div>

  <div class="center">亚米云智慧餐饮</div>
  <!-- 当前为加菜状态是不显示，显示退出 -->
  <!--<div class="right" *ngIf="!addFood.addOrderId" style="position: relative;" (click)="changeRightSpinnerState()">-->
    <!--<i class="fa fa-ellipsis-v" style="font-size: 1.5em;margin-top: 0.7em;"></i>-->
    <!--<div style="width:100%;position: absolute;top:34px;right: 0;background: #474747; color: #fff;border-radius: 2px;font-size: 0.9em;" *ngIf="rightSpinnerState">-->
      <!--<div style="padding: 0 8px;height: 4em;line-height: 3.5em;border-bottom: 1px solid #333" [routerLink]="['/main/table/table-list']">桌台</div>-->
      <!--<div style="padding: 0 8px;height: 4em;line-height: 3.5em;" [routerLink]="['/main/line-up/line-up-submit']">取叫号</div>-->
    <!--</div>-->
  <!--</div>-->

  <!-- 加菜状态时显示退出，点击以后恢复默认状态 -->
  <div class="right" *ngIf="addFood.addOrderId" (click)="addQuit()">
    退出
  </div>
</div>

<!-- 搜索 -->
<div *ngIf="searchState">
<div class="search">
  <input type="text" placeholder="搜索菜品" (click)="goSearch()"><span *ngIf="addFood.addOrderId"><i class="fa fa-map-marker" (click)="changeSearch()" style="    border: 6px solid transparent;background-clip: border-box;font-size: 2em;position: absolute;right: 0;top: 0.5em;"></i></span>
</div>
</div>

<!-- 加菜搜索 -->
<div *ngIf="!searchState">
  <div class="search" style="color: #333;position: relative;text-align: left;padding-left: 2em;">
    <i class="fa fa-map-marker" style="font-size: 1.3em"></i> 当前桌号 {{addFood.tableClass}} {{addFood.tableName}}
    <span (click)="goSearch()" style="color: #999;position: absolute;right: 1em;background: #fff;height: 2.5em;line-height: 2.5em;padding: 0 1em;top: 0.8em;border-radius: 5px;"><i class="fa fa-search" style="font-size: 1.2em; "></i> 搜索</span>
  </div>
</div>



<!-- 菜品分类与菜品列表 -->
<div class="main">
  <div class="class-list">
    <div class="class-item"  *ngFor="let v of foodClassList" (click)="classChange(v)" [ngClass]="{'active': v.id === selectClass['id']}">
      <span class="class-name">{{v.name}}</span>
      <span class="class-count" *ngIf="v.count > 0" [ngClass]="{'class-active': v.id === selectClass['id']}"><i>{{v.count}}</i></span>
    </div>
    <!-- 没有分类的处理 -->
  </div>
  <div class="menu-list">

    <!--<ul class="food-list-for-pad">-->
      <!--&lt;!&ndash;new平板端&ndash;&gt;-->
      <!--<li *ngFor="let v of foodList;let index = index;">-->
        <!--<div class="imgBox" [style.background-image]="'url(' + v.figure_url+ '?x-oss-process=image/resize,w_180)'" (click)="openImg(v)">-->
          <!--&lt;!&ndash;<img [src]="v.figure_url + '?x-oss-process=image/resize,w_180'" alt="" (click)="openImg(v)">&ndash;&gt;-->
        <!--</div>-->
        <!--<div style="padding: 0 10px;">-->
          <!--<div class="showPrice" [title]="v.name">{{v.name}}</div>-->
          <!--<div>-->
            <!--<span style="font-size: 16px;color: #999;line-height: 30px;"><i class="fa fa-rmb"></i> {{v.price | price}}/份</span>-->
            <!--<br>-->
            <!--<span class="dishesCount" unselectable="on" *ngIf="v.type==='0'">-->
                  <!--<i class="fa fa-minus-circle" (click)="reduce(v)"></i>-->
                  <!--<span class="numCount" style="" [class.active]="v.count">{{v.count}}</span>-->
                  <!--<i class="fa fa-plus-circle clickDot" (click)="add(v)"></i>-->
                <!--</span>-->
            <!--<span class="dishesCount" unselectable="on" *ngIf="v.type!=='0'">-->
              <!--<span class="layui-badge" (click)="standard(v,index)">{{v.count || ''}} 选规格</span>-->
            <!--</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</li>-->
      <!--<div style="clear: both;"></div>-->
      <!--&lt;!&ndash;new&ndash;&gt;-->
    <!--</ul>-->

    <!--手机端-->
    <div class="menu-item" *ngFor="let v of foodList">
      <div class="left" [style.background-image]="'url(' + v.figure_url+ '?x-oss-process=image/resize,w_180)'" (click)="openImg(v)">
        <!--<img src="{{v.figure_url}}?x-oss-process=image/resize,w_80,h_80" alt="" (click)="openImg(v)">-->
      </div>
      <div class="right">
        <div class="title" style="font-weight: bold">{{v.name}}</div> <!-- 菜品名称 -->
        <div class="price"><span class="money">￥{{v.price}} <span class="yuan">元/{{v.unit?v.unit:'份'}}</span></span></div> <!-- 价格 -->
        <div class="opers">
          <div class="type1" *ngIf="v.type == '0'">
            <span class="fa fa-minus-circle mom" *ngIf="v.count > 0" (click)="reduce(v)"></span>
            <span class="fa num mom" style="color: orange;" *ngIf="v.count > 0" (click)="modifyCount(v)">{{v.count}}</span>
            <span class="fa fa-plus-circle mom" *ngIf="v.count > 0" (click)="add(v)"></span>
            <span class="fa fa-plus-circle mom mop" *ngIf="v.count == 0" (click)="add(v)"></span>
          </div>
          <div class="type2" *ngIf="v.type != '0'">
            <span style="position: relative;">
              <span class="choose" (click)="standard(v)">选规格</span>
              <span class="bol-label" *ngIf="v.count > 0">{{v.count}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 没有菜品处理操作 -->
    <div class="menu-item" *ngIf="!foodList.length" style="text-align: center;box-shadow: none">
      <div style="flex: 1;font-size: 1.2em;color: #999;padding: 1em 0;"><i class="fa fa-info-circle" aria-hidden="true"></i> 当前分类下没有菜品</div>
    </div>
  </div>
</div>

<!--查看菜品大图-->
<div class="layer-open" *ngIf="showBigPic" (click)="showBigPic=false">
  <div class="content">
    <img style="width: 100%;" [src]="bigImgUrl" alt="">
  </div>
</div>

<!-- 购物车背景 -->
<app-bg-mask *ngIf="shoppingShow" (mask)="maskChange($event)"></app-bg-mask>
<!-- 购物车列表 -->
<app-shop-cart-list [hidden]="!shoppingShow" [shoppingShow]="shoppingShow" (shopList)="shopListChange($event)"></app-shop-cart-list>
<!-- 购物车导航 -->
<app-shop-cart-nav [shoppingShow]="shoppingShow" [addOrderId]="addFood.addOrderId"  (shopNav)="shopNavChange($event)"></app-shop-cart-nav>
